<template>
  <div>
    <el-dialog
      v-model="state.centerDialogVisible"
      title="项目阶段"
      width="50%"
      align-center
      @open="openDialog"
      class="dialogStyle"
    >
      <CommonTitle titleName="项目实施阶段规划">
        <template #rightCnBox>
          <div class="d-flex title_name">
            <div class="m-l20">共计{{state.number||''}}个阶段</div>

            <el-button style="margin-left: auto" size="small" @click="toPath" v-if="state.meetingApplyStatus===3 || state.meetingApplyStatus===0" class="button_edit">
              编辑
            </el-button>
          </div>
        </template>
      </CommonTitle>
      <el-tree
        :data="state.dataSource"
        node-key="projectStageId"
        default-expand-all
        :expand-on-click-node="false"
      >
        <template #default="{ node, data }">
          <div class="custom-tree-node d-flex">
            <div class="name">{{ data.stageName }}</div>
            <div class="time m-l20">
              {{ data.predictStartTime }} 至 {{ data.predictEndTime }}
            </div>
            <div class="department m-l20">
              {{ data.stageUserName }}
            </div>
            <div class="userName m-l20">{{ data.stageDepartmentName }}</div>
            <span>
              <span class="projectPeople" @click="append(data)"> 进场人员 </span>
            </span>
          </div>
        </template>
      </el-tree>
    </el-dialog>
  </div>
</template>
<script setup>
import CommonTitle from "@/components/CommonTitle.vue";
import upload from "@/components/uploadCom/upload.vue";
import { ref, reactive } from "vue";
import { ElDialog, ElForm, ElFormItem, ElTree } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { projectPhase } from "@/api/project";

let router = useRouter();
// 上传的图片附件
const updateFiles = (list) => {
	if (list.length > 0) {
		console.log(list);
	}
};
let id = 1000;
let state = reactive({
	number:0,
	centerDialogVisible: false,
	projectTypeId: "",
	projectId: "",
	meetingApplyStatus:0,
		tabId: "",
	dataSource: [], //树行数据
  startTime:'',
  endTime:'',
});

const toPath = () => {
	if(state.tabId==='1'){ // 投资
		router.push(
				`/constructionProjectManage/preliminaryProject/components/preliminaryInfo2/type=2&projectTypeId=${state.projectTypeId}&projectId=${state.projectId}&projectType=${state.tabId}&status=2&startTime=${state.startTime}&endTime=${state.endTime}`
		);
	}
	if(state.tabId!=='1'){ // 其他
		router.push(
				`/constructionProjectManage/preliminaryProject/components/preliminaryInfo/type=2&projectTypeId=${state.projectTypeId}&projectId=${state.projectId}&projectType=${state.tabId}&status=2&startTime=${state.startTime}&endTime=${state.endTime}`
		);
	}
};
const append = (data) => {
	router.push({
		path: `/constructionProjectManage/preliminaryProject/components/approachPeople/projectId=${data.projectId}&projectStageId=${data.projectStageId}`,
	});
};
const formInline = reactive({
	user: "",
	region: "",
});
const openDialog = () => {
	state.dataSource = [];
	let obj = {
		// projectTypeId: state.projectTypeId,
		projectTypeId: '',
		projectId: state.projectId,
	};
	projectPhase.getProjectPhase(obj).then((res) => {
		const { data, code, msg } = res;
		if (code == 200) {
			state.number = data.number;
			state.dataSource = data.stages;
		}
	});
};
defineExpose({
	state,
});
</script>
<style lang="scss" scoped>
.el-dialog__body .el-form {
	display: flex;
	flex-wrap: wrap;

	justify-content: space-around;
}
.projectPeople {
	color: #fff;
	cursor: pointer;

	text-align: center;
	font-size: 12px;
	height: 20px;

	line-height: 20px;
	margin-left: 20px;
	background-color: #d4ae85;
	border-radius: 10px;
	padding-left: 5px;
	padding-right: 5px;
}

.custom-tree-node {
	.name {
		min-width: 100px;
		height: 20px;
		background: #f7f7fa;
		border-radius: 6px;
		padding: 0 10px;
		text-align: center;
		font-size: 14px;
		color: #1a1a1a;
		line-height: 20px;
	}
	.time,
	.department,
	.userName {
		min-width: 104px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		padding: 0 10px;
		font-size: 14px;
		color: #1a1a1a;
		border-radius: 6px;
		border: 1px solid #e3e7f1;
	}
}
:deep(.el-tree-node__content, .el-tree-node__children) {
	margin-bottom: 10px !important;
}

.title_name {
	width: 80%;
	line-height: 30px;
}


</style>
<style lang="scss" scoped>
@import '@/views/constructionProjectManage/static/dialog.scss';
</style>
